<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/website/common/base.jsp"%>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>提交订单</title>
    <%@ include file="/website/common/common.jsp"%>
    <link href="${webctx }/css/payment.css?v=20170705" rel="stylesheet" type="text/css" />

    <style>
        .new-submit-order .submit-btn a.btn_loading{
            background: #ff6767 url("${webctx }/images/btn_loading_red.gif") no-repeat center center;
            font-size: 0;
        }
    </style>

</head>
<style>

</style>
<body>
<%@ include file="/website/common/top-new.jsp"%>

<div id="wrap-head">
    <div class="head wid990 clearfix">
        <div class="logo"><a href="${ctx }/website/index.jsp"><img src="${webctx }/images/logo.png" /></a></div>
        <div class="head-message">确认核对订单</div>
        <ul class="buySteps">
            <li class="s-1 ">1.我的购物车</li>
            <li class="cur-2">2.填写核对订单信息</li>
            <li class="">3.成功提交订单</li>
        </ul>
    </div>
</div>
<div id="Warp_pay" style="background-color: #fff">
    <div class="new-submit-order wid990">
        <div class="tit" style="margin-bottom: 15px">填写核对订单信息 <span>（温馨提示：订单满 <em> 500 </em>元，方可支持配送）</span></div>
        <div class="order-message">
            <p class="tit">收货信息</p>
            <div class="order-message-con">
                <p><span style="letter-spacing:7px;">收件</span>人：${address.getuser }</p>
                <p>联系电话：${address.phone }</p>
                <p>收货地址：${address.shen } ${address.shi } ${address.qu } ${address.address }</p>
            </div>
        </div>

        <div class="orderList order-message">
            <p class="tit">支付方式</p>
            <div class="order-container pay-method">
                <div class="order-inner order-way">
                    <ul class="clearfix" id="J_RadioCur">
                        <li class="cur">
                            <div class="cart-checkbox">
                                <label>
                                    <input checked="checked" value="2" type="radio" name="paytype">
                                    <span class="chk-ico"></span>
                                    <span class="pay-img"><img src="${webctx }/images/pay/hd.png" /></span>
                                </label>
                            </div>
                        </li>
                        <li class="">
                            <div class="cart-checkbox">
                                <label>
                                    <input value="1" type="radio" name="paytype">
                                    <span class="chk-ico"></span>
                                    <span class="pay-img"><img src="${webctx }/images/pay/WeChat.jpg" /></span>
                                </label>
                            </div>
                        </li>
                        <li style="display: none;" class="">
                            <div class="cart-checkbox">
                                <label>
                                    <input value="1" type="radio" name="paytype">
                                    <span class="chk-ico"></span>
                                    <span class="pay-img"><img src="${webctx }/images/pay/zfb.png" /></span>
                                </label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="order-message">
            <div class="tit">送货清单</div>
            <div class="order-info-n">
                <ul>
                    <li class="th th-info">商品信息</li>
                    <li class="th th-company">厂家</li>
                    <li class="th th-price">单价（元）</li>
                    <li class="th th-amount">数量</li>
                    <li class="th th-sum">小计（元）</li>
                </ul>
            </div>
            <div class="order-info-list">

                <c:forEach items="${products }" var="product">
                    <div class="drug-item">
                        <ul>
                            <li class="td td-img">
                                <a href="javascript:;"><img src="<%=getRandomFileserver()%>${product.photo}" onerror="this.src='${ctx }/website/images/noimg.jpg'" alt=""></a>
                            </li>
                            <li class="td td-name-size">

                                <c:if test="${product.gift == 1 }">
                                    <span>赠品</span>
                                </c:if>

                                    ${product.productname } ${product.B_guige }

                            </li>
                            <li class="td td-company">
                                <c:choose>
                                    <c:when test="${fn:length(product.B_chanjia) > 12}">
                                        <c:out value="${fn:substring(product.B_chanjia, 0, 12)}..." />
                                    </c:when>
                                    <c:otherwise>
                                        <c:out value="${product.B_chanjia}" />
                                    </c:otherwise>
                                </c:choose>
                            </li>
                            <li class="td td-price">￥${product.buyprice }</li>
                            <li class="td td-amount">x ${product.buyamount }</li>
                            <li class="td td-sum">¥${product.sumprice }</li>
                        </ul>
                        <div class="cl"></div>
                    </div>
                </c:forEach>

            </div>
        </div>

        <div class="order-message">
            <div class="tit">发票信息</div>
            <div class="bill-text">
                <span>普通发票(纸质)</span>
                <span class="bill-company"></span>
            </div>
        </div>

        <div class="order-message bor">
            <div class="tit">订单备注</div>
            <div class="remark">
                <input maxlength="30" type="text" name="orderbz" placeholder="请于此处填写您的备注信息，不超过30字">
            </div>
        </div>

        <!-- 结算信息 -->
        <div class="tit mb10 mt-20">结算信息</div>
        <div class="order-cle-n">
            <div class="cle-n-tit"><span ${couponCanList.size()>0?"":"class='plus'"}></span>使用优惠券<em> ${couponCanList.size()>0?"（点击优惠券选中使用）":""} </em>
            </div>
            <input name="couponid" type="hidden" />
            <div class="order-cle-coupon" ${couponCanList.size()>0?"":"style='display:none;'"}>
                <div class="coupon-tit">
                    <ul>
                        <li class="cur">可用</li>
                        <li>不可用</li>
                    </ul>
                    <div class="coupon-page">
                        <span class="coupon-page-num"> <em class="page-num blue num1">${couponCanList.size()>0?'1':'0'}</em> / <em
                                class="page-sum sum1">0</em> </span>
                        <span class="coupon-page-turning clearfix">
                            <a class="coupon-prev prev1" href="javascript:;"></a>
                            <a class="coupon-next next1" href="javascript:;"></a>
                        </span>
                    </div>
                    <div class="coupon-page" style="display: none">
                        <span class="coupon-page-num"> <em class="page-num blue num2">${couponDisList.size()>0?'1':'0'}</em> / <em
                                class="page-sum sum2">0</em> </span>
                        <span class="coupon-page-turning clearfix">
                            <a class="coupon-prev prev2" href="javascript:;"></a>
                            <a class="coupon-next next2" href="javascript:;"></a>
                        </span>
                    </div>
                </div>
                <div id="usable" class="order-coupon-nav order-coupon-have clearfix">
                    <ul>
                        <c:forEach items="${couponCanList}" var="couponCan" >
                            <li yhid="${couponCan.id}" yhmoney="${couponCan.offer_money}">
                                <div class="price fl">￥<em><fmt:formatNumber value="${couponCan.offer_money}" pattern="#0.##" ></fmt:formatNumber></em></div>
                                <div class="fl">
                                    <p class="condition">${couponCan.name}</p>
                                    <p class="condition-money">满 <fmt:formatNumber value="${couponCan.min_money}" pattern="#0.##" ></fmt:formatNumber>可使用</p>
                                    <p class="over-time"><fmt:formatDate value="${couponCan.startdate}" pattern="yyyy-MM-dd"></fmt:formatDate> - <fmt:formatDate value="${couponCan.enddate}" pattern="yyyy-MM-dd"></fmt:formatDate></p>
                                </div>
                            </li>
                        </c:forEach>
                    </ul>
                    <c:if test="${couponCanList.size()<=0}">
                        <p style="text-align: center;padding: 10px 0;color: #AAAAAA;">暂无可用的优惠券</p>
                    </c:if>
                </div>
                <div id="disabled" class="order-coupon-nav order-coupon-disabled clearfix" style="display: none;">
                    <ul>
                        <c:forEach items="${couponDisList}" var="couponDis" >
                            <li>
                                <div class="price fl">￥<em><fmt:formatNumber value="${couponDis.offer_money}" pattern="#0.##" ></fmt:formatNumber></em></div>
                                <div class="fl">
                                    <p class="condition">${couponDis.name}</p>
                                    <p class="condition-money">满<fmt:formatNumber value="${couponDis.min_money}" pattern="#0.##" ></fmt:formatNumber>可使用</p>
                                    <p class="over-time"><fmt:formatDate value="${couponDis.startdate}" pattern="yyyy-MM-dd"></fmt:formatDate> - <fmt:formatDate value="${couponDis.enddate}" pattern="yyyy-MM-dd"></fmt:formatDate></p>
                                </div>
                                <span class="not-available-img"><img src="../images/not-available-img.png" alt=""></span>
                            </li>
                        </c:forEach>
                    </ul>
                    <c:if test="${couponDisList.size()<=0}">
                        <p style="text-align: center;padding: 10px 0;color: #AAAAAA;">没有不可用的优惠券</p>
                    </c:if>
                </div>
            </div>

            <div class="textbox">
                <input name="paymoney" value="${paymoney }" type="hidden">
                <p><span>共 <em> ${products.size() } </em> 件商品，商品总额：</span>￥${order.order_money }</p>
                <p><span>促销优惠：</span>-￥${order.reduce_money }</p>
                <p><span>优惠券抵扣：</span><em id="youhmoneytxt">-￥0.00</em></p>
            </div>
            <div class="cl"></div>
        </div>

        <div class="order-sum">应付总额：<em id="paymoneytxt">￥${paymoney }</em></div>
        <div class="order-address">寄送至：${address.shen } ${address.shi } ${address.qu } ${address.address }（${address.getuser } ${address.phone }）</div>
        <div class="submit-btn"><a id="btn_submit_form" href="javascript:void(0);" onclick="submitorder()">提交订单</a></div>
    </div>
</div>

<!-- 弹窗 -->
<div id="messageLayout" style="display: none;" class="put-up-window">
    <div class="put-up-tit">提交失败</div>
    <div class="put-up-con msg-content">

    </div>
    <div class="put-up-btn">
        <a class="keep-buy" href="javascript:;">返回购物车</a>
        <a class="check" href="javascript:$('#messageLayout').fadeOut();">关闭</a>
        <div class="cl"></div>
    </div>
</div>
<%@ include file="/website/common/foot-site.jsp"%>
<input name="ordercode" value="${order.code }" type="hidden">
<input name="couponPageCount" type="hidden">
<script src="${webctx }/js/Global.js"></script>
<link type="text/css" rel="stylesheet" href="${webctx }/css/webeasyui.css">
<script type="text/javascript" src="${ctx }/util/js/easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx }/util/js/easyui-1.3.3/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
<script>
    $(function(){
        $('#J_RadioCur li').tabcur();
        $('#J_expRadioCur li').tabcur();
        $('#J_billRadioCur li').tabcur();

        //loadcoupon();

    });

    var submiting=false;
    function submitorder(){
        if(!submiting){

            submiting=true;
            $("#btn_submit_form").addClass("btn_loading");

            var reqData = {
                "ordercode":$("[name='ordercode']").val(),
                "orderbz":$("[name='orderbz']").val(),
                "paytype":$("#J_RadioCur .cur").find("input").val(),
                "couponid":$("[name='couponid']").val(),
                "deliverstype":$('input[name="deliverstype"]:checked').val()||1,
                "isinvoice":$('input[name="isinvoice"]:checked').val()||1,
                "remind":$("[name='orderremindtag']").val(),
                "remind_phone":$("[name='orderremindphone']").val()
            };

            $w.httpRequest({
                url:apiroot+"/order/submitOrder",
                data:reqData,
                ok:function(ret){
                    if(ret.Data.orderok=='true'){
                        window.location.href=apiroot+"/order/showorderOk?ordercode="+ret.Data.ordercode;
                    }else{
                        window.location.href=apiroot+"/payment/"+ret.Data.ordercode;
                    }
                },fail:function(ret){
                    if(ret.MsgCode=='101'){
                        var h="以下商品库存不足：";
                        var list=window.eval(ret.MsgDesc);
                        for(var i=0;i<list.length;i++){
                            h+="\r\n"+(i+1)+"、"+list[i].productname+(list[i].attrname || '');
                        }
                        alert(h);
                    }else if(ret.MsgCode=='102'){
                        var h="以下商品已下架：";
                        var list=window.eval(ret.MsgDesc);
                        for(var i=0;i<list.length;i++){
                            h+="\r\n"+(i+1)+"、"+list[i].productname+(list[i].attrname || '');
                        }
                        alert(h);
                    }else if(ret.MsgCode=='103'){
                        var h="以下商品已不在您的可购范围：";
                        var list=window.eval(ret.MsgDesc);
                        for(var i=0;i<list.length;i++){
                            h+="\r\n"+(i+1)+"、"+list[i].productname+(list[i].attrname || '');
                        }
                        alert(h);
                    }else alert(ret.MsgDesc);
                    return false;
                },all:function(){

                    submiting=false;
                    $("#btn_submit_form").removeClass("btn_loading");

                }
            })
        }
    }
    var coupons;
    function loadcoupon(n){
        $w.httpRequest({
            url:apiroot+"/coupon/loadcanlist",
            data:{"psize":2,"pno":n,"ordermoney":"${order.order_money}"},
            ok:function(ret){
                $("[name='couponPageCount']").val(ret.Data.pagecount);
                var ul=$("#J_couponCur");
                ul.html('');
                coupons=ret.Data.list;
                for(var i=0;i<ret.Data.list.length;i++){
                    var data=ret.Data.list[i];

                    if(data.startdate){
                        data.startdate=data.startdate+"";
                        if(data.startdate.length>19){
                            data.startdate = data.startdate.substr(0,19);
                        }
                    }

                    if(data.enddate){
                        data.enddate=data.enddate+"";
                        if(data.enddate.length>19){
                            data.enddate = data.enddate.substr(0,19);
                        }
                    }

                    var h='<li onclick="selcoupon(\''+data.id+'\',this)">'
                        +'<div class="yhq-con">'
                        +'<b></b>'
                        +'<div class="yhq-title"><em>'+data.offer_money+'元</em> '+data.name+'</div>'
                        +'<div class="yhq-txt">'
                        +'<p>使用条件：满'+data.min_money+'元</p>'
                        +'<p>有效期：'+data.startdate+'－'+data.enddate+'</p>'
                        +'</div>'
                        +'</div>'
                        +' </li>'
                    ul.append(h);
                }
                if(ret.Data.list.length==0)
                    ul.append("<div style='color:#B9B9B9;text-align:center;padding:15px 0px'>没有可用优惠劵!</div>")

                ul=$(".coupon-nav");
                ul.html('');
                for(var i=1;i<=ret.Data.pagecount;i++){
                    ul.append('<li onclick="couponpage('+i+')">'+i+'</li>');
                }
            }
        })
    }
    var couponpageno=1;
    function couponpage(n){
        couponpageno=n;
        loadcoupon(couponpageno);
    }
    function couponprev(){
        if(couponpageno>1){
            couponpageno=couponpageno-1;
            loadcoupon(couponpageno);
        }
    }
    function couponnext(){
        if(couponpageno < $("[name='couponPageCount']").val()) {
            couponpageno=couponpageno+1;
            loadcoupon(couponpageno);
        }
    }
    var youhmoney=0;
    function selcoupon(id,obj){
        youhmoney=0;
        if($(".yhq-con",obj).get(0).className.indexOf("cur")==-1){
            $(".yhq-con").removeClass("cur");
            $(".yhq-con",obj).addClass("cur");
            $("[name='couponid']").val(id);
            for(var i=0;i<coupons.length;i++){
                if(coupons[i].id==id){
                    youhmoney=coupons[i].offer_money;
                    break;
                }
            }
        }else{$(".yhq-con",obj).removeClass("cur");$("[name='couponid']").val('');}

        var paymoney=parseFloat($("[name='paymoney']").val())-youhmoney;
        paymoney=paymoney.toFixed(2);
        if(paymoney<0)paymoney=0;
        $("#youhmoneytxt").text("-"+youhmoney);
        $("#paymoneytxt").text("￥"+paymoney);
    }
    function addremind(){
        $w.openWin({html:"<div style='text-align:center;padding:30px 0px;'><p><input name='remindphone' class='easyui-numberbox' style='width:300px;height:34px;' placeholder='填写手机号码后收货会有短信通知' value='"+$("[name='orderremindphone']").val()+"'><span style='color:red'></span></p><p style='margin-top:20px'><a href='javascript:addremindok();' class='btn green marginR16'>确 定</a></p></div>",title:'收货提醒',w:500,h:220,collapsible:false,minimizable:false,modal:true,maximizable:false,resizable:false});
    }
    function addremindok(){
        $("[name='remindphone']").next().text('');
        if($("[name='remindphone']").val()==''){
            $("[name='orderremindtag']").val('0');
            $("#orderremin1").show();
            $("#orderremin2").hide();
            $w.closeCurrWin();
        }else{
            if($w.isMobile($("[name='remindphone']").val())){
                $("[name='orderremindtag']").val('1');
                $("[name='orderremindphone']").val($("[name='remindphone']").val());
                $("#orderremin1").hide();
                $("#orderremin2").show();
                $w.closeCurrWin();
            }else $("[name='remindphone']").next().text('手机号不正确');
        }

    }

    function showMessage(msg){
        $("#messageLayout .msg-content").text(msg);
        $("#messageLayout").fadeIn(500);
    }

</script>

<script>
    //优惠券展开与收起
    $(".cle-n-tit span").click(function () {
        $(this).toggleClass("plus");
        $(".order-cle-coupon").slideToggle();
    })

    //优惠券选中状态
    var youhmoney=0;
    $(".order-coupon-have ul li").click(function () {
        youhmoney=0;
        if($(this).hasClass("cur")){

            $("[name='couponid']").val("");
            var paymoney=parseFloat($("[name='paymoney']").val());
            paymoney=paymoney.toFixed(2);
            if(paymoney<0)paymoney=0;
            $("#youhmoneytxt").text("-￥"+0);
            $("#paymoneytxt").text("￥"+paymoney);

            $(this).removeClass("cur");
        } else {
            $("[name='couponid']").val($(this).attr("yhid"));
            youhmoney = parseFloat($(this).attr("yhmoney"));

            var paymoney=parseFloat($("[name='paymoney']").val())-youhmoney;
            paymoney=paymoney.toFixed(2);
            if(paymoney<0)paymoney=0;
            $("#youhmoneytxt").text("-￥"+youhmoney);
            $("#paymoneytxt").text("￥"+paymoney);

            $(".order-coupon-have ul li").removeClass("cur");
            $(this).addClass("cur");
        }
    })

    $(".coupon-tit ul li").click(function () {
        var curr = $(this).index();
        $(".coupon-tit ul li").removeClass("cur");
        $(this).addClass("cur");
        $(".order-coupon-nav").hide();
        $(".order-coupon-nav").eq(curr).fadeIn("slow");
        $(".coupon-page").hide();
        $(".coupon-page").eq(curr).fadeIn("slow");
    })

    $(document).ready(function () {
        var ul = $(".order-coupon-have ul"); //ul
        var li = $(".order-coupon-have ul li");//li
        var prev = $(".prev1");//上一页按钮
        var next = $(".next1");//下一页按钮
        var li_wid = li.outerWidth(true);//li的宽度
        var li_num = li.length;//li的个数
        var page_sum = 0;//总页数
        var page_num = $(".num1");//当前页数
        var ul_wid = li_num * li_wid;//ul的宽度
        var m_left = parseInt(ul.css("margin-left"));//滚动距离
        var page_wid = li_wid * 3;//一页的宽度
        var index = parseInt(page_num.text());//当前显示的页数

        ul.css("width", ul_wid);

        if(li_num % 3 != 0){
            page_sum = parseInt(li_num / 3) + 1;
        } else {
            page_sum = parseInt(li_num / 3);
        }
        $(".sum1").text(page_sum);

        //上一页
        prev.click(function () {
            m_left = m_left + page_wid;
            index = index - 1;
            if (m_left > 0){
                index = page_sum;
                m_left = -(page_sum - 1) * page_wid;
            }
            page_num.text(index);
            ul.css("margin-left", m_left);
        })

        //下一页
        next.click(function () {
            m_left = m_left - page_wid;
            index = index + 1;
            if(-m_left >= ul_wid){
                index = 1;
                m_left = 0;
            }
            page_num.text(index);
            ul.css("margin-left", m_left);
        })

    });

    $(document).ready(function () {
        var ul = $(".order-coupon-disabled ul"); //ul
        var li = $(".order-coupon-disabled ul li");//li
        var prev = $(".prev2");//上一页按钮
        var next = $(".next2");//下一页按钮
        var li_wid = li.outerWidth(true);//li的宽度
        var li_num = li.length;//li的个数
        var page_sum = 0;//总页数
        var page_num = $(".num2");//当前页数
        var ul_wid = li_num * li_wid;//ul的宽度
        var m_left = parseInt(ul.css("margin-left"));//滚动距离
        var page_wid = li_wid * 3;//一页的宽度
        var index = parseInt(page_num.text());//当前显示的页数

        ul.css("width", ul_wid);

        if(li_num % 3 != 0){
            page_sum = parseInt(li_num / 3) + 1;
        } else {
            page_sum = parseInt(li_num / 3);
        }
        $(".sum2").text(page_sum);

        //上一页
        prev.click(function () {
            m_left = m_left + page_wid;
            index = index - 1;
            if (m_left > 0){
                index = page_sum;
                m_left = -(page_sum - 1) * page_wid;
            }
            page_num.text(index);
            ul.css("margin-left", m_left);
        })

        //下一页
        next.click(function () {
            m_left = m_left - page_wid;
            index = index + 1;
            if(-m_left >= ul_wid){
                index = 1;
                m_left = 0;
            }
            page_num.text(index);
            ul.css("margin-left", m_left);
        })

    });

</script>

</body>
</html>